<template>
  <div class="musicList">
    <div class="musicTop">
      <div class="title">发现好歌单</div>
      <div class="more">查看更多</div>
    </div>
    <div class="musicContent">
      <van-swipe :loop="false" :show-indicators="false" :width="150" class="mySwipe">
        <van-swipe-item v-for="item in musicListData" :key="item">
          <!--     进行跳转,path指定母路径,query指定携带参数     -->
          <router-link :to="{path:'/item_music',query:{id:item.id}}">
            <img :src="item.picUrl"/>
            <span>
            <svg aria-hidden="true" class="icon">
              <use xlink:href="#icon-24gl-play"></use>
            </svg>
            {{ playCountFormat(item.playCount) }}
            </span>
            <span class="name">{{ item.name }}</span>
          </router-link>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {getMusicList} from "@/request/api/home.js";

// 歌单信息
const musicListData = ref([])

// 播放量显示
const playCountFormat = (num) => {
  if (num >= 100000000) {
    return (num / 100000000).toFixed(1) + "亿"
  } else if (num >= 10000) {
    return (num / 10000).toFixed(1) + "万"
  }
}

onMounted(async () => {
  const tempMusicList = await getMusicList()
  musicListData.value = tempMusicList.data.result
})
</script>

<style lang="scss" scoped>
.musicList {
  width: 100%;
  height: 5rem;
  padding: 0.2rem;

  .musicTop {
    width: 100%;
    height: 0.6rem;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.2rem;

    .title {
      font-size: 0.4rem;
      font-weight: 900;
    }

    .more {
      border: 0.02rem solid #ccc;
      text-align: center;
      line-height: 0.6rem;
      padding: 0 0.2rem;
      border-radius: 0.4rem;
    }
  }
}

.musicContent {
  width: 100%;
  height: 4rem;

  .mySwipe {
    width: 100%;
    height: 100%;

    img {
      width: 100%;
      height: 3rem;
    }
  }
}

a{
  color: black;
}
</style>